<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="father">father
        <div class="son">son
            <span class="me">x</span>

        </div>

    </div>


    <script>
        //通过层级关系,父子兄,获取节点,逻辑性更强.
        let span = document.querySelector('span');

        //1.获取父级节点(亲爸爸)
        console.log(span.parentNode);
    </script>


<ul>
    <li>逃学威龙</li>
    <li>少林足球</li>
    <li>破坏之王</li>
    <li>周星驰</li>
</ul>


<script>

     let ul =document.querySelector('ul');
     //2.获取所有子节点(文本 注释 元素等)
     console.log(ul.childNodes);


     //3.只获取元素节点
     console.log(ul.children);
</script>

</body>
</html>